<template>
  <div class="user-container mt20 ml20 fs14p">
    <div class="container-search w100 flex flex-wrap">
      <div class="w33 h29p lh29p mtb5">
        <div class="flex">
          <div class="w100p pr10p textRight">姓名</div>
          <el-input v-model="searchFormData.name" size="mini" class="w200p"></el-input>
        </div>
      </div>
      <div class="w33 h29p lh29p mtb5">
        <div class="flex">
          <div class="w100p pr10p textRight">手机号</div>
          <el-input v-model="searchFormData.mobile" size="mini" class="w200p"></el-input>
        </div>
      </div>
      <div class="w33 h29p lh29p mtb5">
        <div class="flex">
          <el-button type="primary" size="mini" >查询</el-button>
          <el-button size="mini" >重置</el-button>
        </div>
      </div>
    </div>
    <div class="w100 container-body">
      <div class="mt10">
        <el-button type="primary" size="mini" @click="showCreateUser">添加用户</el-button>
      </div>
      <div class="mt10 mb10">
        <el-table :data="list" border fit class="w100 tableBodyHeight">
          <el-table-column
            v-loading="loading"
            align="center"
            label="ID"
            width="65"
            element-loading-text="请给我点时间！"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="companyName" align="center" label="公司名" class="cell"></el-table-column>
          <el-table-column prop="userName" align="center" label="登录名" class="cell"></el-table-column>
          <el-table-column prop="realName" align="center" label="昵称" class="cell"></el-table-column>
          <el-table-column prop="mobile" align="center" label="手机号" class="cell"></el-table-column>
<!--          <el-table-column prop="author" align="center" label="性别" class="cell"></el-table-column>-->
          <el-table-column align="center" label="地区" class="cell">
            <template slot-scope="scope">
              <span>{{ scope.row.province }} {{ scope.row.city }} {{ scope.row.county }}</span>
            </template>
          </el-table-column>
<!--          <el-table-column prop="author" align="center" label="绑定设备编号" class="cell"></el-table-column>-->
<!--          <el-table-column prop="author" align="center" label="openID" class="cell"></el-table-column>-->
          <el-table-column prop="createdAt" align="center" label="创建时间" class="cell"></el-table-column>
          <el-table-column prop="updatedAt" align="center" label="更新时间" class="cell"></el-table-column>
          <el-table-column prop="deletedAt" align="center" label="删除时间" class="cell"></el-table-column>
          <el-table-column prop="loginAt" align="center" label="登录时间" class="cell"></el-table-column>
          <el-table-column class-name="status-col" label="操作">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="showEditUser(row)">修改</el-button>
              <el-button type="danger" size="mini" @click="deleteUser(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-content flex w100 mt10">
          <el-pagination
            class="flex"
            background
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :fullscreen="true"
      :modal="false"
      class="FormDialog"
      :title="dialogTitle"
      :visible.sync="isShowDetail"
      :style="{'display': formDialogDisplay}"
    >
      <UserDetail :userDetailData="userDetailData"></UserDetail>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from '@/api/user'
import UserDetail from './components/AdminDetail'
export default {
  name: 'User',
  components: {
    UserDetail
  },
  data() {
    return {
      total: 30,
      dialogTitle: '添加用户',
      list: null,
      searchFormData: {
        page: 1,
        limit: 10,
        name: null,
        mobile: null
      },
      userDetailData: {},
      loading: false,
      isShowDetail: false,
      formDialogDisplay: 'none'
    }
  },
  watch: {
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      fetchList(this.searchFormData).then(response => {
        this.list = response.data.data
        this.searchFormData.page = response.data.current_page
        this.total = response.data.total
        this.loading = false
      })
    },
    showCreateUser() {
      this.dialogTitle = '添加用户'
      this.isShowDetail = true
      this.formDialogDisplay = 'flex'
    },
    showEditUser(row) {
      this.dialogTitle = '修改用户'
      this.isShowDetail = true
      this.formDialogDisplay = 'flex'
      this.userDetailData = row
    },
    deleteUser(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.user-container{
  width: 95%;
  border: 1px solid #EBEEF5;
  border-radius: 5px;
  background-color: #FFF;
  color: #303133;
  transition: .3s;
}

.container-search{
  background-color: #ecf5ff;
  border-color: #c3d3e2;
  padding: 18px 20px;
  border-bottom: 1px solid #EBEEF5;
  box-sizing: border-box;
}
.container-body{
  padding-left: 1%;
  padding-right: 1%;
}
.page-content{
  align-items: center;
  justify-content: center;
}


/deep/ .el-table thead {
  color: #767d88;
}
/deep/ .el-table__header-wrapper {
  height: 36px;
}
/deep/ .el-table--medium th{
  height: 36px;
  line-height: 1.5;
  padding: 0;
}
/deep/ .el-table--medium td{
  height: 36px;
  line-height: 1.5;
  padding: 0;
}
/deep/ .el-table thead th {
  background-color: #ecf5ff !important;
}
/deep/ .el-button--mini {
  font-weight: bold;
}
</style>
